6<template>
	<view class="user-page">
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<!-- #ifdef APP -->
			<view slot="top">
				<u-navbar title="黑名单" :autoBack="true" :placeholder="true">></u-navbar>
			</view>
			<!-- #endif -->
			<view class="user-list">
				<view class="user-item" v-for="(item,index) in dataList" :key="index" @click="selectChef(item)">
					<image :src="$OssUrl(item.user.avatar)" class="item-left"  mode="aspectFill"></image>
					<view class="item-center">
						<view class="item-title">
							<view class="name">{{item.user.nickname}}</view>
							<image src="../../static/common/icon_hy.png" class="icon-user"></image>
							<image src="../../static/common/icon_vip.png" class="icon-vip" v-if="item.user.vip"></image>
						</view>
						<view class="item-introduce"><text>{{ item.user.age }}岁</text>
							<text class="divider">|</text>
							<text>{{ item.user.city }}</text>
							<text class="divider">|</text>
							<text class="distance">{{ item.user.distance }}km</text>
						</view>
					</view>
					<view class="item-right" @click="detailBlackUser(item)">
						<image src="../../static/common/icon_yc.png" class="icon"></image>
						<view>移除</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [],
			}
		},
		onShow() {
			this.refreshList()
		},
		methods: {
			detailBlackUser(item) {
				let that = this
				uni.showModal({
					content: "是否将用户" + item.user.nickname + "移除黑名单！",
					success(res) {
						if (res.confirm) {
							that.$Api['user'].editBlackUser({
								id: item.id,
							}).then(res => {
								that.$Toast('移除黑名单成功')
								that.refreshList()
							})
						}
					}
				})
			},
			refreshList() {
				if (this.$refs.paging) {
					this.$refs.paging.scrollToTop()
					this.$refs.paging.refresh();
				}
			},
			queryList(pageNo, pageSize) {
				this.$Api['user'].getBlackList({
					page: pageNo,
					limit: pageSize,
				}).then(res => {
					this.$refs.paging.complete(res.data.data);
				}).catch(res => {
					this.$refs.paging.complete(false);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.user-page {
		width: 100%;
		min-height: 100vh;

		.user-list {
			margin: 0rpx 30rpx;

			.user-item {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
				box-sizing: border-box;
				padding: 26rpx 20rpx;
				border-radius: 28rpx;
				background: #ffffff;

				.item-left {
					width: 104rpx;
					height: 104rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}

				.item-center {
					flex: 1;

					.item-title {
						font-size: 32rpx;
						color: #323334;
						display: flex;
						align-items: center;

						.icon-user {
							width: 28rpx;
							height: 28rpx;
							margin-left: 12rpx;
						}

						.icon-vip {
							margin-left: 12rpx;
							width: 94rpx;
							height: 28rpx;
						}
					}

					.item-introduce {
						font-size: 24rpx;
						color: #9A9A9A;
						margin-top: 18rpx;

						.divider {
							margin: 0 6rpx;
						}
					}
				}

				.item-right {
					margin-left: 20rpx;
					width: 96rpx;
					height: 44rpx;
					background: #F6F6F6;
					border-radius: 22rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 20rpx;
					color: #606060;

					.icon {
						width: 28rpx;
						height: 28rpx;
						margin-right: 4rpx;
					}
				}
			}
		}
	}
</style>